<template>
  <div style="width:100vw;" class="class-center-box">
    <!-- 头部 -->
    <!-- <mt-header fixed title="课程中心">
      <router-link to="/StudyCenter" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>-->
    <TopTab @setTeaType="getProps" :tabText="tabText">
      <div v-show="classTypeForTab !=2 " slot="chooseBar">
        <div @click="actionSheet" class="action-sheet">
          <p class="action-text">
            课程类别
            <span
              style="font-size:8px;position:relative;top:-2px;left:5px;"
              class="iconfont iconsanjiao"
            ></span>
          </p>
        </div>
        <div style="position:fixed;z-index:10;top:77px;">
          <div style="position:relative;">
            <ul class="action-ul" v-show="sheetVisible">
              <li @click="activeLi(1)" :class="{'active-li':activeds}">全部</li>
              <li @click="activeLi(2)" :class="{'active-li':activedss}">内部课程</li>
              <li @click="activeLi(3)" :class="{'active-li':activedsss}">外部课程</li>
            </ul>
          </div>
        </div>
        <div @click="sheetVisible = false" v-show="sheetVisible" class="action-modal"></div>
      </div>
      <div v-show="classTypeForTab ==2 " slot="chooseBar">
        <div @click="actionSheet" class="action-sheet">
          <p class="action-text">
            课程类型
            <span
              style="font-size:8px;position:relative;top:-2px;left:5px;"
              class="iconfont iconsanjiao"
            ></span>
          </p>
        </div>
        <div style="position:fixed;z-index:10;top:77px;">
          <div style="position:relative;">
            <ul class="action-ul" v-show="sheetVisibles">
              <li @click="activeLi1('')" :class="{'active-li':all}">全部</li>
              <li @click="activeLi1(0)" :class="{'active-li':type0}">技术研发类</li>
              <li @click="activeLi1(1)" :class="{'active-li':type1}">营销类</li>
              <li @click="activeLi1(2)" :class="{'active-li':type2}">国际化类</li>
              <li @click="activeLi1(3)" :class="{'active-li':type3}">职能管理类</li>
              <li @click="activeLi1(4)" :class="{'active-li':type4}">生产管理类</li>
              <li @click="activeLi1(5)" :class="{'active-li':type5}">技能类</li>
              <li @click="activeLi1(6)" :class="{'active-li':type6}">通用知识类</li>
            </ul>
          </div>
        </div>
        <div @click="sheetVisibles = false" v-show="sheetVisibles" class="action-modal"></div>
      </div>
      <div style="padding-top:41px;" slot="container1">
        <div class="bscroll" ref="faceClass">
          <div :style="loadedDown ? 'padding-bottom:90px;' : ''" class="bscroll-container">
            <div class="default-page-box" v-show="!faceClass.length">
              <div class="default-page">
                <div class="default-text">哎呀，空空如也!</div>
              </div>
            </div>
            <div style="flex-wrap:wrap;" class="class-center-excellent-courses flex-row">
              <div
                @click="goFaceClass(1,item.id,'')"
                v-for="(item,index) in faceClass"
                :key="index"
                class="courses-card"
                :class="[(index+1)%2 == 0 ? marginRight : '']"
              >
                <div
                  :style="`background-image:url(${item.coursePhoto || require('@/assets/homePicture/detail1.jpg') });`"
                  class="img-box"
                >
                  <!-- <img :src="item.coursePhoto" alt /> -->
                </div>
                <div class="courses-tip">
                  <div style="overflow:hidden;">{{item.title}}</div>
                </div>
                <div class="user-msg flex-row">
                  <p style="color:#4787e4;margin-right:5px;" class="iconfont iconxingming"></p>
                  <p class="text-over">{{item.userName}} · {{item.deptName || '外部导师'}}</p>
                </div>
              </div>
            </div>
            <div v-show="loadingDown" style="padding:10px;text-align:center;">
              <mt-spinner type="snake"></mt-spinner>
            </div>
            <div v-show="loadedDown" style="line-height:50px;text-align:center;">没有更多数据</div>
          </div>
        </div>
      </div>
      <div style="padding-top:41px;" slot="container2">
        <div class="bscroll" ref="smallClass">
          <div :style="loadedDown ? 'padding-bottom:90px;' : ''" class="bscroll-container">
            <div class="default-page-box" v-show="!smallClass.length">
              <div class="default-page">
                <div class="default-text">哎呀，空空如也!</div>
              </div>
            </div>
            <div>
              <div
                @click="goFaceClass(2,item.id,item.fileType)"
                v-for="(item,index) in smallClass"
                :key="index"
                class="vide-shadow"
              >
                <div
                  :style="`background-image:url(${item.coursePhoto || require('@/assets/homePicture/detail1.jpg') });`"
                  class="vide0-box"
                >
                  <div v-show="item.fileType != 1" class="play-icon iconfont iconbofang"></div>
                  <!-- <img src="@/assets/homePicture/detail5.jpg" alt /> -->
                </div>
                <div class="video-footer flex-row">
                  <div>{{item.title}}</div>
                  <!-- <div class="flex-row">
                    <div style="margin-right:10px;">
                      <span class="iconfont iconpinglun"></span>
                      <span>评论</span>
                    </div>
                    <div>
                      <span class="iconfont iconshoucang"></span>
                      <span>收藏</span>
                    </div>
                  </div>-->
                </div>
              </div>
            </div>
            <div v-show="loadingDown" style="padding:10px;text-align:center;">
              <mt-spinner type="snake"></mt-spinner>
            </div>
            <div v-show="loadedDown" style="line-height:50px;text-align:center;">没有更多数据</div>
          </div>
        </div>
      </div>
    </TopTab>
  </div>
</template>
<script>
import TopTab from "@/components/topTab";
import { setText } from "../../untils/ddnavigate";
import BScroll from "better-scroll";
export default {
  components: {
    TopTab
  },
  data() {
    return {
      classTypeForTab: "",
      marginRight: "margin-right",
      faceClass: [],
      smallClass: [],
      tabText: {
        left: "面授课程",
        right: "微课程"
      },
      params: {
        courseType: "", // 内部0 外部1 微课程2
        page: 1,
        pageSize: 10
      },
      sheetVisible: false,
      sheetVisibles: false,
      activeds: true,
      activedss: "",
      activedsss: "",
      pageTotal: "",
      loadingDown: false,
      loadingUp: false,
      loadedDown: false,
      all: true,
      type0: "",
      type1: "",
      type2: "",
      type3: "",
      type4: "",
      type5: "",
      type6: ""
    };
  },
  mounted() {
    let { params } = this;
    this.$post("qryCourseCentre", params).then(res => {
      if (res.success) {
        this.faceClass = res.data.courseCentreBacks;
        this.sheetVisible = false;
        this.sheetVisibles = false;
        // better-scroll初始化
        this.initScroll("faceClass");
        this.initScroll("smallClass");
        this.pageTotal = res.data.totals;
      }
    });
    // 设置标题文字
    setText("课程中心");
  },
  methods: {
    initScroll(dom) {
      let that = this;
      that.$nextTick(() => {
        let bscrollDom = this.$refs[dom];
        let bScroll = new BScroll(bscrollDom, {
          click: true,
          probeType: 2,
          bounceTime: 700, //回弹时间
          pullUpLoad: {
            threshold: 0, // 当上拉距离超过50px时触发 pullingUp 事件
            stop: 50
          },
          useTransition: false // 防止iphone微信滑动卡顿
        });
        // bScroll.on("pullingDown", () => {
        //   that.loadingUp = true;
        //   that.loadedDown = false;
        //   that.params.page = 1;
        //   setTimeout(() => {
        //     that.classFunction(that.params, dom, "downLoad");
        //   }, 1000);
        //   bScroll.finishPullDown();
        // });
        bScroll.on("pullingUp", () => {
          let { pageTotal } = that;
          console.log(pageTotal);
          if (that[dom].length < pageTotal) {
            that.loadingDown = true;
            that.params.page++;
            setTimeout(() => {
              that.publicAjax(that.params, dom, "upLoad");
            }, 1000);
          } else if(that[dom].length >= 10){
            that.loadedDown = true;
          }
          bScroll.finishPullUp();
        });
        bScroll.refresh();
      });
    },
    actionSheet() {
      this.sheetVisible = !this.sheetVisible;
      this.sheetVisibles = !this.sheetVisibles;
    },
    activeLi(index) {
      let { params } = this;
      params.page = 1;
      this.faceClass = [];
      this.loadedDown = false;
      if (index == 1) {
        params.courseType = "";
        this.tabActive(true, false, false);
        this.publicAjax(params, "faceClass");
      } else if (index == 2) {
        params.courseType = 0;
        this.publicAjax(params, "faceClass");
        this.tabActive(false, true, false);
      } else {
        params.courseType = 1;
        this.publicAjax(params, "faceClass");
        this.tabActive(false, false, true);
      }
    },
    tabActive(blean1, blean2, blean3) {
      this.activeds = blean1;
      this.activedss = blean2;
      this.activedsss = blean3;
    },
    tabActive1(all, blean0, blean1, blean2, blean3, blean4, blean5, blean6) {
      this.all = all;
      this.type0 = blean0;
      this.type1 = blean1;
      this.type2 = blean2;
      this.type3 = blean3;
      this.type4 = blean4;
      this.type5 = blean5;
      this.type6 = blean6;
    },
    activeLi1(index) {
      let { params } = this;
      params.courseType = 2;
      params.page = 1;
      this.smallClass = [];
      this.loadedDown = false;
      console.log(index);
      if (index === "") {
        params.smallType = "";
        this.tabActive1(true, false, false, false, false, false, false, false);
        this.publicAjax(params, "smallClass");
      } else if (index == 0) {
        params.smallType = 0;
        this.tabActive1(false, true, false, false, false, false, false, false);
        this.publicAjax(params, "smallClass");
      } else if (index == 1) {
        params.smallType = 1;
        this.tabActive1(false, false, true, false, false, false, false, false);
        this.publicAjax(params, "smallClass");
      } else if (index == 2) {
        params.smallType = 2;
        this.tabActive1(false, false, false, true, false, false, false, false);
        this.publicAjax(params, "smallClass");
      } else if (index == 3) {
        params.smallType = 3;
        this.tabActive1(false, false, false, false, true, false, false, false);
        this.publicAjax(params, "smallClass");
      } else if (index == 4) {
        params.smallType = 4;
        this.tabActive1(false, false, false, false, false, true, false, false);
        this.publicAjax(params, "smallClass");
      } else if (index == 5) {
        params.smallType = 5;
        this.tabActive1(false, false, false, false, false, false, true, false);
        this.publicAjax(params, "smallClass");
      } else if (index == 6) {
        params.smallType = 6;
        this.tabActive1(false, false, false, false, false, false, false, true);
        this.publicAjax(params, "smallClass");
      }
    },
    goFaceClass(type, id, fileType) {
      if (type == 1) {
        this.$router.push({ path: "/faceClass", query: { id } });
      } else {
        if (fileType == 0) {
          this.$router.push({ path: "/learnClass", query: { id } });
        } else {
          this.$router.push({ path: "/pdf", query: { id } });
        }
      }
    },
    getProps(courseType) {
      let { params } = this;
      params.page = 1;
      this.loadedDown = false;
      if (courseType == 1) {
        params.courseType = 2;
        this.classTypeForTab = 2;
        this.smallClass = [];
        this.publicAjax(params, "smallClass");
      } else {
        params.courseType = "";
        this.classTypeForTab = "";
        this.faceClass = [];
        this.publicAjax(params, "faceClass");
      }
    },
    publicAjax(params, classType) {
      this.$post("qryCourseCentre", params).then(res => {
        if (res.success) {
          this[classType] = this[classType].concat(res.data.courseCentreBacks);
          this.pageTotal = res.data.totals;
          this.sheetVisible = false;
          this.sheetVisibles = false;
          this.loadingDown = false;
          this.loadingUp = false;
        } else {
          this.loadingDown = false;
          this.loadingUp = false;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import url("~@/pagecss/class-center.less");
.bscroll-container {
  padding-bottom: 140px;
}
</style>